<template>
	<div class="shoppingList">
		<navAndBanner></navAndBanner>
		<div class="img1">
				
		</div>
		<div style="height:1px;border-top:3px solid #7ecef4;width:76.4%;margin:0 auto;"></div>
		<div style="margin-top: 30px;margin-left: 15.3vw">
			<div id="tips">
				<span>客户姓名</span><span>手机号码</span><span>会员号</span><span>台号</span>
				<div style="position: relative;"><input type="" name="" class="search"><img src="../../assets/img/搜索.png" style="left: 29vw;position: absolute;top: 10px">
				<button class="btn">导入信息</button>
				</div>
			</div>
		</div>
		<div class="table">
			<Table border :columns="columns4" :data="data1"></Table>
		</div>
		<div class="footer">
			<p>kqmts   &copy 2015-2017 All Rights Reserved</p>
			<p>川ICP备16020686号</p>
		</div>
	</div>
</template>
<script>
	import navAndBanner from '../navAndBanner.vue'
	export default {
		components:{
			navAndBanner
		},
		data(){
			return{
				columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序列',
                        key: 'name'
                    },
                    {
                        title: '账单号',
                        key: 'age'
                    },
                    {
                        title: '桌号',
                        key: 'address'
                    },
                    {
                        title: '客户姓名',
                        key: 'address'
                    },
                    {
                        title: '联系方式',
                        key: 'address'
                    },
                    {
                        title: '商品名称',
                        key: 'address'
                    },
                    {
                        title: '商品编码',
                        key: 'address'
                    },
                    {
                        title: '数量',
                        key: 'address'
                    }
                ]
			}
		}
	}
</script>
<style scoped>
	.table{
		width: 69.3vw;
		margin: 0 auto;
		margin-top: 45px;
		margin-bottom: 125px
	}
	.btn{
		width: 7.81vw;
		height: 48px;
		outline: none;border:none;
		background: #ffcc00;
		color: white;
		font-size: 1vw;
		margin-left: 29.27vw
	}
	.search{
		border:3px solid #7ecef4;
		width: 31.25vw;
		height: 48px;
		position: relative;
	}
	#tips span{
		display: inline-block;
		width: 5.2vw;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #5cb7e2;
		background: #bee6f9;
		font-size: 0.93vw
	}
	.clickspan{
		background: #7ecef4;
		color: white
	}
	.img1{
		background: url(../../assets/img/Title2.png) no-repeat;
		width: 822px;
		height: 66px;
		margin:0 auto;
		margin-top: 90px;margin-bottom: 80px;
	}
	.navAndBanner{
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		width: 100%;
		height: 120px;
		vertical-align: middle;
		padding-top: 40px
		
	}
	a{
		text-decoration: none;
	}
	nav ul li{
		display: inline-block;
		vertical-align: middle;
		margin-right: 5%
	}
	nav ul li a{
		font-size: 24px;
		color: #999999;
	}
	nav ul li:first-child{
		margin-left: 13%;
		margin-right: 15%;
	}
	nav ul li:last-child{
		margin-top: 12px;
		float: right
		
	}
	body{background-color: #1E1E1E}
	*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
	.footer{
		height: 125px;
		width: 100%;
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		text-align: center;
		vertical-align: middle;
		color: white;
		padding-top: 50px
	}
</style>